<template>
	<div>
		<div ref="load" class="load-1" v-show="istrue">
               
                <div class="line"></div>
                <div class="line"></div>
                <div class="line"></div>
			<p>正在加载。。。</p>
            </div>
		<ul class="mui-table-view">
				<li class="mui-table-view-cell mui-media" v-for="e in list">
					<router-link v-bind="{to:'/news/newslist/'+e.id}">
						<img class="mui-media-object mui-pull-left" :src="e.img_url">
						<div class="mui-media-body">
							{{e.title}}
							<p class="mui-ellipsis">
								{{e.zhaiyao}}
							</p>
						</div>
						<div class="newsFoot">
							<span>{{e.add_time | forTime("YYYY-MM-DD hh:mm:ss")}}</span>
							<span>已点击次数：{{e.click}}</span>
						</div>
					</router-link>
				</li>
			</ul>
	</div>
</template>

<script>
import { Toast } from 'mint-ui';
	export default{
		data(){
			return {
				list:[
						
					],
					istrue:false
				}
				
		},
		created(){
			var that = this
			setTimeout(function(){
				that.istrue = true
				that.getData()
			},1000)	
			
		},
		methods:{
			getData(){
				this.$http.get('http://vue.studyit.io/api/getnewslist').then(function(data){
					console.log(data)
					if(data.body.status != 0 ){
						Toast({
							  message: '成功读取数据',
							  position: 'middle',
							  duration: 1000
							});
						return
						}
					this.istrue = false
					console.log(this)
					this.$refs.load.style.display = "none"
					this.list = data.body.message
					})
				}
			},
		filters:{
			getTime(input){
				var d = new Date(input);
			   var year = d.getFullYear();
			   var month = d.getMonth() + 1;
			   var day = d.getDate() <10 ? '0' + d.getDate() : '' + d.getDate();
			   var hour = d.getHours();
			   var minutes = d.getMinutes();
			   var seconds = d.getSeconds();
			   return  year+ '-' + month + '-' + day + ' ' + hour + ':' + minutes + ':' + seconds;
			}
		}
	}	

</script>

<style scoped>
	.mui-table-view-cell{
		    padding: 8px 10px;
	}
	.mui-table-view .mui-media-object{
	    line-height: 70px;
	    max-width: 70px;
	    height: 70px;
	}

	.newsFoot{
		display: flex;
		justify-content: space-between;
		font-size: 12px;
		color: #0094ff;
		margin-top: 10px;
	}

	.load-1{
		width: 100px;
		height: 100px;
		text-align: center;
		position: absolute;
		top: 50%;
		left: 50%;
		transform:translate(-50px,-50px);
		/*background-color: #f1f1f1;*/

	}

	.load-1 .line:nth-last-child(1) {animation: loadingA 1.5s 2s infinite;}
	.load-1 .line:nth-last-child(2) {animation: loadingA 1.5s 1s infinite;}
	.load-1 .line:nth-last-child(3) {animation: loadingA 1.5s 1.5s infinite;}

	.line {
	    display: inline-block;
	    width: 20px;
	    height: 50px;
	    border-radius: 50px;
	    background-color: #4b9cdb;
	    margin-top: 20px;
	}
	@keyframes loadingA {
	    0 {height: 35px;}
	    50% {height: 75px;}
	    100% {height: 50px;}
	}
</style>